Blog: A short form for weblog, a frequent and chronological publication of comments and thoughts on the web. They usually include philosophical reflections, opinions on the Internet and social or political issues.
CODE: Javascript time picker / selector
Add the following to <head>
START COPY HERE
<script type="text/javascript">
<!--
var ie=document.all;
var dom=document.getElementById;
var ns4=document.layers;
var textCtl;
function setTimePicker(t) {
hrobj = document.getElementById('myhr').selectedIndex;
var b_hr = document.getElementById('myhr').options[hrobj].value;
mnobj = document.getElementById('mymin').selectedIndex;
var b_mn = document.getElementById('mymin').options[mnobj].value;
textCtl.value=b_hr+":"+b_mn;
closeTimePicker();
}
function refreshTimePicker() {
var sHR; var sMin; var sHTML;
for (hr=0;hr<=23;hr++) {
sHR+="<option value='"+padZero(hr)+"'>"+padZero(hr)+"</option>";
}
for (xmin=0;xmin<=59;xmin++) {
sMin+="<option value='"+padZero(xmin)+"'>"+padZero(xmin)+"</option>";
}
sHTML = "<select id='myhr'>"+sHR+"</select> <select id='mymin'>"+sMin+"</select> <input type='button' value='Select' onclick='setTimePicker();' />";
document.getElementById("timePickerContent").innerHTML = sHTML;
}
if (dom){
document.write ("<div id='timepicker' style='z-index:+999;padding:5px; position:absolute;visibility:hidden; border:1px solid #cccccc; background-color: #eeeeee;'><p style='font-weight: bold;border-bottom:1px solid #cccccc;'>Select Hour & Minute</p><span id='timePickerContent'></span> <input type='button' value='Cancel' onclick='closeTimePicker()' /></div>");
refreshTimePicker();
}
var crossobj=(dom)?document.getElementById("timepicker").style : ie? document.all.timepicker : document.timepicker;
var currentCtl
function setMyTime(ctl,ctl2) {
var leftpos=0
var toppos=0
textCtl=ctl2;
currentCtl = ctl
aTag = ctl
do {
aTag = aTag.offsetParent;
leftpos += aTag.offsetLeft;
toppos += aTag.offsetTop;
} while(aTag.tagName!="BODY");
crossobj.left = ctl.offsetLeft + leftpos
crossobj.top = ctl.offsetTop + toppos + ctl.offsetHeight + 2
crossobj.visibility=(dom||ie)? "visible" : "show"
}
function closeTimePicker() {
crossobj.visibility="hidden";
}
function padZero(n) {
v="";
if (n<10) {
return ('0'+n);
} else {
return n;
}
}
-->
</script>
END COPY HERE
Example:
<fieldset>
<label for="mytime">Select Time:</label> <input name="mytime" id="mytime" type="text" value="" /> <input type="button" value="..." onclick="setMyTime(this,mytime)" />
</fieldset>